<template>
    <el-dialog
        :close-on-click-modal="false"
        :visible.sync="materialIdVisible"
        :before-close="handleClose"
        top="5vh"
        append-to-body
      >
      <template slot="title">
          <div :style="titleColor">搜索</div>
        </template>
        <el-form :inline="true" class="demo-form-inline filter">
          <el-form-item label="物料名称">
            <el-input
              v-model="listQuery.fgoodname"
              clearable
              class="filter-item note"
              placeholder="请输入物料名称"
            />
          </el-form-item>
          <el-form-item label="存储分类">
          <el-select v-model="listQuery.fclassstno" filterable clearable class="filter-item" placeholder="存储分类">
            <el-option v-for="item in getListfstorageflag" :key="item.fclassstno" :label="item.fclassstname" :value="item.fclassstno"/>
          </el-select>
        </el-form-item>
          <el-form-item>
            <el-button
              round
              size="medium"
              class="filter-item"
             :style="{background:buttonColor.lookup,color:buttonColor.color}"
              @click="searchFilteruse"
            >查找</el-button
            >
          </el-form-item>
        </el-form>
  
        <!-- 查询结果 -->
        <el-table
          v-loading="listLoading"
          :data="searchList"
          :header-cell-style="tableColor"
          stripe
          element-loading-text="正在查询中。。。"
          border
          fit
          highlight-current-row
          height="300"
        >
          <el-table-column align="center" label="耗材编号" prop="fmaterialno" />
          <el-table-column align="center" label="耗材名称" prop="fmaterialname" />
          <el-table-column align="center" :formatter="formatfstorageflag" label="耗材分类" prop="fclassstno" />
          <el-table-column align="center" label="条码" prop="fcasno" />
          <el-table-column
            align="center"
            label="选择"
            class-name="small-padding"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                round
                size="small"
                class="button-margin"
                 :style="{background:buttonColor.confirm,color:buttonColor.color}"
                @click="searchDatause(scope.row)"
              >确定</el-button
              >
            </template>
          </el-table-column>
        </el-table>
  
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          style="padding:14px 10px !important"
          @pagination="getSearchListuse"
        />
      </el-dialog>
  </template>
  
  <script>
  import {listgoodInfo} from '@/api/haocai/goodInfo'
  import {listgoodClass} from "@/api/haocai/goodClass"
  import Pagination from '@/components/Pagination'
  import { titleColor,buttonColor } from "@/filters/index";
  export default {
    name: 'Material',
    components: { Pagination },
    props:{
      materialIdVisible: {
        required: true,
        type: Boolean
      },
      tableColor: {
        required: true,
        type: Object
      },
      fsiteNo: {
        required: true,
      },
    },
    data(){
      return{
        titleColor,
        buttonColor,
        getListfstorageflag:undefined,
        searchList: null,
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          limit: 20,
          fsiteNo: undefined,
          fgoodname: undefined,
          fsupno:undefined,
          getListfstorageflag:undefined,
          fclassstno:undefined,
          sort: 'create_time',
          order: 'desc'
        },
      }
    },
    created() {
      this.getSearchListuse()
      //存储分类
      listgoodClass({fsiteNo:this.$store.state.user.fsiteNo})
      .then(res=>{
        this.getListfstorageflag = res.data.data.list
      })
      .catch(()=>{
        this.getListfstorageflag = []
      })
    },
    watch: {
      fsiteNo: function() {
        this.getSearchListuse()
      },
    },
    methods: {
    //列表
      getSearchListuse() {
        this.listLoading = true
        this.listQuery.fsiteNo = this.fsiteNo
         listgoodInfo(this.listQuery)
        .then(response => {
          this.searchList = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.searchList = []
          this.total = 0
            this.listLoading = false
        })
  
      },
  
      // 存储分类
      formatfstorageflag: function (row, column) {
        if (this.getListfstorageflag.length > 0) {
          for (let i = 0; i < this.getListfstorageflag.length; i++) {
            if (row.fclassstno === this.getListfstorageflag[i].fclassstno) {
              return this.getListfstorageflag[i].fclassstname;
            }
          }
          return "";
        } else {
          return "";
        }
      },
  
      searchFilteruse() {
        this.listQuery.page = 1
        this.getSearchListuse()
      },
  
      // 物料选择
      searchDatause(row) {
        // 更新父组件materialIdVisible字段
         this.$emit('update:materialIdVisible', false)
         // 向父组件返回数据
        this.$emit('materialDialog', { data: row })
      },
  
      // 弹窗点击关闭前的回调
      handleClose(){
        this.$emit('update:materialIdVisible', false)
      }
  
    }
  }
  </script>
  